home *** CD-ROM | disk | FTP | other *** search
/ Freelog 115 / FreelogNo115-MaiJuin2013.iso / Internet / AvantBrowser / asetup.exe / _data / webkit / resources.pak / Unnamed File 000069.txt < prev    next >
Text File  |  2013-04-03  |  8KB  |  250 lines
  1. // Copyright (c) 2012 The Chromium Authors. All rights reserved.
  2. // Use of this source code is governed by a BSD-style license that can be
  3. // found in the LICENSE file.
  4.  
  5. cr.define('cr.ui', function() {
  6.   /** @const */
  7.   var Menu = cr.ui.Menu;
  8.   /** @const */
  9.   var positionPopupAroundElement = cr.ui.positionPopupAroundElement;
  10.  
  11.   /**
  12.    * Creates a new menu button element.
  13.    * @param {Object=} opt_propertyBag Optional properties.
  14.    * @constructor
  15.    * @extends {HTMLButtonElement}
  16.    */
  17.   var MenuButton = cr.ui.define('button');
  18.  
  19.   MenuButton.prototype = {
  20.     __proto__: HTMLButtonElement.prototype,
  21.  
  22.     /**
  23.      * Initializes the menu button.
  24.      */
  25.     decorate: function() {
  26.       this.addEventListener('mousedown', this);
  27.       this.addEventListener('keydown', this);
  28.  
  29.       // Adding the 'custom-appearance' class prevents widgets.css from changing
  30.       // the appearance of this element.
  31.       this.classList.add('custom-appearance');
  32.       this.classList.add('menu-button');  // For styles in menu_button.css.
  33.  
  34.       var menu;
  35.       if ((menu = this.getAttribute('menu')))
  36.         this.menu = menu;
  37.  
  38.       // An event tracker for events we only connect to while the menu is
  39.       // displayed.
  40.       this.showingEvents_ = new EventTracker();
  41.  
  42.       this.anchorType = cr.ui.AnchorType.BELOW;
  43.       this.invertLeftRight = false;
  44.     },
  45.  
  46.     /**
  47.      * The menu associated with the menu button.
  48.      * @type {cr.ui.Menu}
  49.      */
  50.     get menu() {
  51.       return this.menu_;
  52.     },
  53.     set menu(menu) {
  54.       if (typeof menu == 'string' && menu[0] == '#') {
  55.         menu = this.ownerDocument.getElementById(menu.slice(1));
  56.         cr.ui.decorate(menu, Menu);
  57.       }
  58.  
  59.       this.menu_ = menu;
  60.       if (menu) {
  61.         if (menu.id)
  62.           this.setAttribute('menu', '#' + menu.id);
  63.       }
  64.     },
  65.  
  66.     /**
  67.      * Handles event callbacks.
  68.      * @param {Event} e The event object.
  69.      */
  70.     handleEvent: function(e) {
  71.       if (!this.menu)
  72.         return;
  73.  
  74.       switch (e.type) {
  75.         case 'mousedown':
  76.           if (e.currentTarget == this.ownerDocument) {
  77.             if (!this.contains(e.target) && !this.menu.contains(e.target))
  78.               this.hideMenu();
  79.             else
  80.               e.preventDefault();
  81.           } else {
  82.             if (this.isMenuShown()) {
  83.               this.hideMenu();
  84.             } else if (e.button == 0) {  // Only show the menu when using left
  85.                                          // mouse button.
  86.               this.showMenu(false);
  87.               // Prevent the button from stealing focus on mousedown.
  88.               e.preventDefault();
  89.             }
  90.           }
  91.           break;
  92.         case 'keydown':
  93.           this.handleKeyDown(e);
  94.           // If the menu is visible we let it handle all the keyboard events.
  95.           if (this.isMenuShown() && e.currentTarget == this.ownerDocument) {
  96.             if (this.menu.handleKeyDown(e)) {
  97.               e.preventDefault();
  98.               e.stopPropagation();
  99.             }
  100.           }
  101.           break;
  102.  
  103.         case 'focus':
  104.           if (!this.contains(e.target) && !this.menu.contains(e.target))
  105.             this.hideMenu();
  106.           break;
  107.  
  108.         case 'activate':
  109.         case 'resize':
  110.           this.hideMenu();
  111.           break;
  112.       }
  113.     },
  114.  
  115.     /**
  116.      * Shows the menu.
  117.      * @param {boolean} shouldSetFocus Whether to set focus on the
  118.      *     selected menu item.
  119.      */
  120.     showMenu: function(shouldSetFocus) {
  121.       this.hideMenu();
  122.  
  123.       var event = document.createEvent('UIEvents');
  124.       event.initUIEvent('menushow', true, true, window, null);
  125.  
  126.       if (this.dispatchEvent(event)) {
  127.         this.menu.hidden = false;
  128.  
  129.         this.setAttribute('menu-shown', '');
  130.         if (shouldSetFocus)
  131.           this.menu.focusSelectedItem();
  132.  
  133.         // when the menu is shown we steal all keyboard events.
  134.         var doc = this.ownerDocument;
  135.         var win = doc.defaultView;
  136.         this.showingEvents_.add(doc, 'keydown', this, true);
  137.         this.showingEvents_.add(doc, 'mousedown', this, true);
  138.         this.showingEvents_.add(doc, 'focus', this, true);
  139.         this.showingEvents_.add(win, 'resize', this);
  140.         this.showingEvents_.add(this.menu, 'activate', this);
  141.         this.positionMenu_();
  142.       }
  143.     },
  144.  
  145.     /**
  146.      * Hides the menu. If your menu can go out of scope, make sure to call this
  147.      * first.
  148.      */
  149.     hideMenu: function() {
  150.       if (!this.isMenuShown())
  151.         return;
  152.  
  153.       this.removeAttribute('menu-shown');
  154.       this.menu.hidden = true;
  155.  
  156.       this.showingEvents_.removeAll();
  157.       this.focus();
  158.     },
  159.  
  160.     /**
  161.      * Whether the menu is shown.
  162.      */
  163.     isMenuShown: function() {
  164.       return this.hasAttribute('menu-shown');
  165.     },
  166.  
  167.     /**
  168.      * Positions the menu below the menu button. At this point we do not use any
  169.      * advanced positioning logic to ensure the menu fits in the viewport.
  170.      * @private
  171.      */
  172.     positionMenu_: function() {
  173.       positionPopupAroundElement(this, this.menu, this.anchorType,
  174.                                  this.invertLeftRight);
  175.     },
  176.  
  177.     /**
  178.      * Handles the keydown event for the menu button.
  179.      */
  180.     handleKeyDown: function(e) {
  181.       switch (e.keyIdentifier) {
  182.         case 'Down':
  183.         case 'Up':
  184.         case 'Enter':
  185.         case 'U+0020': // Space
  186.           if (!this.isMenuShown())
  187.             this.showMenu(true);
  188.           e.preventDefault();
  189.           break;
  190.         case 'Esc':
  191.         case 'U+001B': // Maybe this is remote desktop playing a prank?
  192.         case 'U+0009': // Tab
  193.           this.hideMenu();
  194.           break;
  195.       }
  196.     }
  197.   };
  198.  
  199.   /**
  200.    * Helper for styling a menu button with a drop-down arrow indicator.
  201.    * Creates a new 2D canvas context and draws a downward-facing arrow into it.
  202.    * @param {string} canvasName The name of the canvas. The canvas can be
  203.    *     addressed from CSS using -webkit-canvas(<canvasName>).
  204.    * @param {number} width The width of the canvas and the arrow.
  205.    * @param {number} height The height of the canvas and the arrow.
  206.    * @param {string} colorSpec The CSS color to use when drawing the arrow.
  207.    */
  208.   function createDropDownArrowCanvas(canvasName, width, height, colorSpec) {
  209.     var ctx = document.getCSSCanvasContext('2d', canvasName, width, height);
  210.     ctx.fillStyle = ctx.strokeStyle = colorSpec;
  211.     ctx.beginPath();
  212.     ctx.moveTo(0, 0);
  213.     ctx.lineTo(width, 0);
  214.     ctx.lineTo(height, height);
  215.     ctx.closePath();
  216.     ctx.fill();
  217.     ctx.stroke();
  218.   };
  219.  
  220.   /** @const */ var ARROW_WIDTH = 6;
  221.   /** @const */ var ARROW_HEIGHT = 3;
  222.  
  223.   /**
  224.    * Create the images used to style drop-down-style MenuButtons.
  225.    * This should be called before creating any MenuButtons that will have the
  226.    * CSS class 'drop-down'. If no colors are specified, defaults will be used.
  227.    * @param {=string} normalColor CSS color for the default button state.
  228.    * @param {=string} hoverColor CSS color for the hover button state.
  229.    * @param {=string} activeColor CSS color for the active button state.
  230.    */
  231.   MenuButton.createDropDownArrows = function(
  232.       normalColor, hoverColor, activeColor) {
  233.     normalColor = normalColor || 'rgb(192, 195, 198)';
  234.     hoverColor = hoverColor || 'rgb(48, 57, 66)';
  235.     activeColor = activeColor || 'white';
  236.  
  237.     createDropDownArrowCanvas(
  238.         'drop-down-arrow', ARROW_WIDTH, ARROW_HEIGHT, normalColor);
  239.     createDropDownArrowCanvas(
  240.         'drop-down-arrow-hover', ARROW_WIDTH, ARROW_HEIGHT, hoverColor);
  241.     createDropDownArrowCanvas(
  242.         'drop-down-arrow-active', ARROW_WIDTH, ARROW_HEIGHT, activeColor);
  243.   };
  244.  
  245.   // Export
  246.   return {
  247.     MenuButton: MenuButton
  248.   };
  249. });
  250.